<template>
  <div class="user">
    <van-nav-bar title="动态" />
    <div class="hot">
      <div class="hotHeader">
        <div class="title">热门话题</div>
        <div class="hotMore" @click="toHotCenter">查看更多</div>
      </div>
      <div class="hotList">
        <div
          class="hotItem"
          v-for="item in hotList"
          :key="item.id"
          @click="toHotDetail(item.jump_url)"
        >
          <img src="../images/hot.png" alt="" />
          {{ item.name }}
        </div>
      </div>
    </div>
    <div class="divider"></div>
    <van-skeleton title avatar :row="3" :loading="loading">
      <div class="dynamic" v-for="msg in msgList" :key="msg.msg">
        <div class="header">
          <div class="avator">
            <img src="../images/bili.png" alt="" />
          </div>
          <div class="name">{{ msg.name }}</div>
        </div>
        <div class="newMsg">
          {{ msg.msg }}
        </div>
        <div class="footer">
          <div class="share">
            <img src="../images/zhuanfa.png" alt="" />
          </div>
          <div class="msg">
            <img src="../images/xiaoxi.png" alt="" />
          </div>
          <div class="like">
            <img src="../images/dianzan.png" alt="" />
          </div>
        </div>
        <div class="divider"></div>
      </div>
      <div class="finished">暂时没有更多了</div>
    </van-skeleton>
  </div>
</template>

<script setup>
import { onMounted, ref } from "@vue/runtime-core";
import { getHot, getnewMsg } from "../api";
import { useRouter } from "vue-router";
import { getLocal } from "../common/js/utils";

const router = useRouter();
const hotList = ref([]);
const Hot = ref([]);
const loading = ref(true);
const msgList = ref([]);

//热门话题跳转
const toHotDetail = (href) => {
  window.open(href, "_blank");
};
//话题中心
const toHotCenter = () => {
  router.push({ path: "/hotCenter" });
};

onMounted(() => {
  let token = getLocal("token");
  //  console.log(getLocal('token'));
  if (!token) {
    router.push("/login");
  } else {
    getHot().then((res) => {
      // console.log(res.data);
      Hot.value = res.data.topic_items;
      hotList.value = Hot.value.slice(0, 3);
      // console.log(hotList.value);
    });
    getnewMsg().then((res) => {
      // console.log(res.data);
      msgList.value = res.data;
      loading.value = false;
    });
  }
});
</script>

<style scoped>
.hotHeader {
  display: flex;
  justify-content: space-between;
}
.title {
  font-size: 14px;
  font-weight: bold;
  margin-left: 5px;
}
.hotMore {
  font-size: 14px;
  color: #aaa;
  margin-right: 5px;
}
.hotItem {
  margin-left: 10px;
  padding: 5px 0;
  font-size: 14px;
}
.hotItem img {
  width: 14px;
  height: 14px;
}
.divider {
  height: 10px;
  background-color: rgb(240, 238, 238);
}
.header {
  display: flex;
  margin-left: 10px;
}
.header img {
  width: 50px;
  height: 50px;
  padding-right: 10px;
  border-radius: 30px;
}
.name {
  height: 50px;
  margin-top: 10px;
  justify-content: center;
}
.newMsg {
  margin-left: 10px;
}
.footer {
  display: flex;
  padding: 10px 40px;
  width: calc(100% -80px);
  justify-content: space-between;
}
.footer img {
  width: 25px;
  height: 25px;
}
.finished {
  width: 100%;
  margin-top: 20px;
  text-align: center;
}
</style>